<template>
  <div>
    <el-row>
      <el-col :span="24">
        <dy-panel>
          <dy-panel-header title="数据权限"></dy-panel-header>
          <el-row>
            <el-col :span="24">
              <dy-panel-body>
                <el-row>
                  <el-form :inline="true" class="demo-form-inline">

                    <el-form-item label="状态">
                      <el-select v-model="queryParam.appName" placeholder="请选择服务">
                        <el-option v-for="it in appList" :label="it.appName" :value="it.appName"></el-option>
                      </el-select>
                    </el-form-item>

                    <el-form-item label="关键字">
                      <el-input
                        v-model="queryParam.searchKey"
                        placeholder="请输入角色编码或角色名称"
                        @change="doSearchList"
                      ></el-input>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="doSearchList">查询</el-button>
                    </el-form-item>
                  </el-form>
                </el-row>
              </dy-panel-body>
              <dy-panel-body v-loading="loading">
                <el-table
                  @selection-change="onSelectRowEvent"
                  :data="tableList"
                  border
                  style="width: 100%;text-align: center"
                  @sort-change="onSortTableEvent"
                >

                  <el-table-column prop="tableSchema" label="数据库" align="center" width="100"></el-table-column>
                  <el-table-column prop="tableName" label="表名" align="left" width="280">
                    <template slot-scope="scope">
                      <el-link
                        style="margin-right: 10px"
                        @click="onTableNameClick(scope.row.tableName,scope.row.fieldList)"
                        type="primary"
                      >{{ scope.row.tableName }}
                      </el-link>
                      <!--  <el-link style="margin-right: 10px" type="primary">重置密码</el-link>-->
                    </template>
                  </el-table-column>
                  <el-table-column prop="ruleSum" label="规则数量" align="center" width="80"></el-table-column>

                  <el-table-column prop="tableComment" label="注释" align="center"></el-table-column>
                  <el-table-column prop="engine" label="引擎" align="center" width="100"></el-table-column>
                  <el-table-column prop="tableCollation" label="编码" align="center" width="160"></el-table-column>
                  <el-table-column prop="id" label="操作" width="180">
                    <template slot-scope="scope">
                      <el-link
                        style="margin-right: 10px"
                        @click="onEditSelectEvent(scope.row)"
                        type="primary"
                      >查询
                      </el-link>
                      <el-link
                        style="margin-right: 10px"
                        @click="onEditUpdateEvent(scope.row)"
                        type="primary"
                      >更新
                      </el-link>
                      <el-link
                        style="margin-right: 10px"
                        @click="onEditDeleteEvent(scope.row)"
                        type="primary"
                      >删除
                      </el-link>
                    </template>
                  </el-table-column>
                </el-table>
                <div>
                  <dy-pagination
                    :current-page.sync="queryParam.currentPage"
                    :page-size.sync="queryParam.pageSize"
                    @click="doSearchList"
                    :total="tableTotal"
                  ></dy-pagination>
                </div>
              </dy-panel-body>
            </el-col>
          </el-row>
        </dy-panel>
      </el-col>
    </el-row>
    <el-row>
      <el-dialog :title="tableData.title" :visible.sync="tableData.dialogTableVisible">
        <el-table :data="tableData.filedList">
          <el-table-column property="fieldName" label="字段名称" width="200"></el-table-column>
          <el-table-column property="fieldLength" label="字段类型" width="120"></el-table-column>
          <el-table-column property="fieldAllowNull" label="可空"></el-table-column>
          <el-table-column property="fieldDesc" label="字段描述"></el-table-column>
        </el-table>
      </el-dialog>
      <el-dialog :title="ruleData.title" :visible="ruleData.dialogTableVisible" width="80%">
        <el-button type="primary" @click="onAddRule">新增规则</el-button>
        <el-table class="tb-edit" :data="ruleData.ruleList" style="width: 100%">
          <el-table-column property="ruleName" label="规则名称" width="200">
            <template slot-scope="scope">
              <el-input size="small" v-model="scope.row.ruleName" placeholder="请输入规则名称"
                        @change="handleEdit(scope.$index, scope.row)"></el-input>
            </template>
          </el-table-column>
          <el-table-column property="rulePriority" label="优先级" width="80">
            <template slot-scope="scope">
              <el-input size="small" min="0" type="number" v-model="scope.row.rulePriority" placeholder="请输入优先级"
                        @change="handleEdit(scope.$index, scope.row)"></el-input>
            </template>
          </el-table-column>
          <el-table-column property="ruleValue" label="规则值" width="280">
            <template slot-scope="scope">
              <el-input size="small" v-model="scope.row.ruleValue" placeholder="请输入规则值"
                        @change="handleEdit(scope.$index, scope.row)"></el-input>
            </template>
          </el-table-column>
          <el-table-column property="ruleCondition" label="规则条件">
            <template slot-scope="scope">
              <el-input size="small" v-model="scope.row.ruleCondition" placeholder="请输入规则条件"
                        @change="handleEdit(scope.$index, scope.row)"></el-input>
            </template>
          </el-table-column>
          <el-table-column property="ruleCondition" label="操作" width="80">
            <el-link
              style="margin-right: 10px"
              @click="onEditRowEvent(false,scope.row)"
              type="primary"
            >删除
            </el-link>
          </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
      <el-button @click="ruleData.dialogTableVisible = false">取 消</el-button>
      <el-button type="primary" @click="onSubmitRule">确 定</el-button>
  </span>
      </el-dialog>
      <dy-modal
        :read-only="editModal.readOnly"
        v-if="editModal.visible"
        :visible.sync="editModal.visible"
        :form-key="editModal.formKey"
        width="400px"
      >
        <auth-role-update
          :data="editModal.data"
          :form-key="editModal.formKey"
          :roleList="roleList"
          :deptList="deptList"
        ></auth-role-update>
      </dy-modal>
    </el-row>
  </div>
</template>
<script>
  import {DyPanel, DyPanelHeader} from '@/view/panel'
  import DyPanelBody from '@/view/panel/DyPanelBody'
  import registryCentreApi from '@/apis/sysApp/RegistryCentreApi.js'
  import authDataBaseManageApi from '@/apis/authApp/authDataBaseManageApi.js'
  import authTbDatascopeApi from '@/apis/authApp/authTbDatascopeApi.js'
  import AuthRoleUpdate from '@/pages/AuthApp/AuthRole/AuthRoleUpdate.vue'
  import DyPagination from '@/components/pagination/DyPagination.vue'
  import HttpCode from '@/js/httpCode.js'

  export default {
    name: 'userList',
    components: {
      AuthRoleUpdate,
      DyPanelBody,
      DyPanel,
      DyPanelHeader,
      UserUpdate,
      DyPagination
    },
    data () {
      return {
        tableData: {
          title: '数据表',
          filedList: [],
          dialogTableVisible: false
        },
        ruleData: {
          title: '数据表',
          ruleList: [{
            ruleName: 'xxx',
            rulePriority: '1',
            ruleValue: 'xxx'
          }],
          dialogTableVisible: false
        },
        /**
         * 编辑弹出框
         */
        editModal: {
          formKey: 'user-update',
          readOnly: false,
          data: {},
          visible: false
        },
        loading: true,
        /**
         * 查询参数
         */
        queryParam: {
          currentPage: 1,
          pageSize: 10
        },
        /**
         * 上方操作按钮
         */
        operateBtn: {
          addBtn: true,
          editBtn: false,
          delBtn: true,
          importBtn: true,
          exportBtn: true
        },
        /**
         * 已选中的行
         */
        selectRows: [],
        deptFilter: '',
        appList: [],
        tableTotal: 0,
        tableList: []
      }
    },
    created () {
      /**
       * 查询所有部门
       */
      registryCentreApi.selectAllAppService().then(msg => {
        this.appList = msg.rows
      })
      /**
       * 执行列表查询
       * */
      this.doSearchList()
    },

    methods: {
      handleCurrentChange (row, event, column) {
        console.log(row, event, column, event.currentTarget)
      },
      handleEdit (index, row) {
        console.log(index, row)
      },
      handleDelete (index, row) {
        console.log(index, row)
      },
      onAddRule () {
        this.ruleData.ruleList.push({
          rulePriority: 0
        })
      },
      onSubmitRule () {
        this.ruleData.ruleList
        for (let row of this.ruleData.ruleList) {
          row.appName = this.ruleData.appName
          row.ruleType = this.ruleData.ruleType
          row.tableName = this.ruleData.tableName
          row.databaseName = this.ruleData.databaseName

        }
        authTbDatascopeApi.addService(this.ruleData.ruleList).then((msg) => {
          this.$message({
              type: 'success',
              message: msg.msg
            }
          )
          this.ruleData.dialogTableVisible = false
        })
      },
      onEditSelectEvent (row) {
        this.ruleData.title = `查询权限过滤(${row.tableName})`
        this.ruleData.ruleType = 'select'
        this.ruleData.appName = row.appName
        this.ruleData.tableName = row.tableName
        this.ruleData.databaseName = row.tableSchema
        this.ruleData.ruleList = []
        let query = {appName: row.appName, tableName: row.tableName, ruleType: 'select'}
        authTbDatascopeApi.selectList(query).then(msg => {
          if (msg.code === HttpCode.E204) {
            this.ruleData.ruleList = []
          } else {
            this.ruleData.ruleList = msg.rows
          }
        }).catch(msg => {
          this.ruleData.ruleList = []
        })
        this.ruleData.dialogTableVisible = true

      },
      onEditUpdateEvent (row) {
        this.ruleData.ruleList = []
        this.ruleData.title = `更新权限过滤(${row.tableName})`
        this.ruleData.ruleType = 'update'
        this.ruleData.appName = row.appName
        this.ruleData.tableName = row.tableName
        this.ruleData.databaseName = row.tableSchema
        console.log(row)
        let query = {appName: row.appName, tableName: row.tableName, ruleType: 'update'}
        authTbDatascopeApi.selectList(query).then(msg => {
          console.log(HttpCode.E204)
          if (msg.code === HttpCode.E204) {
            this.ruleData.ruleList = []
          } else {
            this.ruleData.ruleList = msg.rows
          }
          console.log(this.ruleData.ruleList)
        }).catch(msg => {
          this.ruleData.ruleList = []
        })
        this.ruleData.dialogTableVisible = true

      },
      onEditDeleteEvent (row) {
        this.ruleData.ruleList = []
        this.ruleData.title = `删除权限过滤(${row.tableName})`
        this.ruleData.ruleType = 'delete'
        this.ruleData.appName = row.appName
        this.ruleData.tableName = row.tableName
        this.ruleData.databaseName = row.tableSchema
        let query = {appName: row.appName, tableName: row.tableName, ruleType: 'delete'}
        authTbDatascopeApi.selectList(query).then(msg => {
          if (msg.code === HttpCode.E204) {
            this.ruleData.ruleList = []
          } else {
            this.ruleData.ruleList = msg.rows
          }
        }).catch(msg => {
          this.ruleData.ruleList = []
        })
        this.ruleData.dialogTableVisible = true

      },

      onTableNameClick (tableName, fieldList) {
        this.tableData.dialogTableVisible = true
        this.tableData.title = tableName
        this.tableData.filedList = fieldList
      },
      /**
       * 编辑按钮事件处理
       */
      onEditBtnEvent () {
        if (this.selectRows.length != 1) {
          return
        }
        this.editModal.readOnly = false
        this.editModal.data = this.selectRows[0]
        this.editModal.visible = true
      },
      /**
       * 新增按钮事件处理
       */
      onAddBtnEvent () {
        this.editModal.readOnly = false
        this.editModal.data = {}
        this.editModal.visible = true
      },
      /**
       * 编辑某行事件处理
       * @param readOnly
       * @param data
       */
      onEditRowEvent (readOnly, data) {
        this.editModal.readOnly = false
        this.editModal.data = this.cloneDeep(data)
        this.editModal.visible = true
      },
      /**
       * 选中某行事件处理
       * @param selection
       */
      onSelectRowEvent (selection) {
        this.selectRows = selection
        if (this.selectRows.length != 1) {
          this.operateBtn.editBtn = false
        } else {
          this.operateBtn.editBtn = true
        }
      },
      /**
       * 部门选择事件处理
       * @param data
       * @param node
       * @param array
       */
      onSelectDeptEvent (data, node, array) {
        if (data.id === '1') {
          this.queryParam.deptId = ''
        } else {
          this.queryParam.deptId = data.id
        }
        this.doSearchList()
      },
      /**
       * 排序事件处理
       * @param col
       */
      onSortTableEvent (col) {
        this.queryParam.fixed = col.prop
        this.queryParam.sort = col.order == 'descending' ? 'desc' : 'asc'
        this.doSearchList()
      },
      /**
       * 查询列表业务处理
       */
      doSearchList () {
        this.loading = true
        authDataBaseManageApi.selectAllTableList(this.queryParam).then(msg => {
          setTimeout(() => {
            this.tableList = msg.rows
            this.tableTotal = msg.total
            this.queryParam.currentPage = msg.currentPage
          }, 200)
        }).finally(() => {
          this.loading = false
        })
      }
    },
    computed: {},
    watch: {
      deptFilter (val) {
        this.$refs.tree.filter(val)
      }
    }
  }
</script>
<style>
  * {
    margin: 0;
    padding: 0
  }

  body {
    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    overflow: auto;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
  }

  .tb-edit .current-row .el-input {
    display: block
  }

  .tb-edit .current-row .el-input + span {
    display: none
  }
</style>
